import { useEffect, useState } from 'react';
import styles from './index.module.less';
import SearchForm from './components/serchForm';
import { Button, Dropdown, Form, Modal, Space, Table, Upload } from 'antd';
import { getTaskList, updateTaskStatus } from '../../services/task';
import MuseumForm from './components/museumForm';
import { appointTimeMap, palaceAppointTimeMap, platformMap } from './config';
import PalaceForm from './components/palaceForm';
import { UploadOutlined } from '@ant-design/icons';
import { BaseURL } from '../../config';

const Index = () => {
  const [form] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [museumVisable, setMuseumVisable] = useState(false);
  const [palaceVisable, setPalaceVisable] = useState(false);
  const [loading, setLoading] = useState(false);
  const [UploadHost] = useState(BaseURL);
  const token = localStorage.getItem('token');
  
  const headers = {
    Authorization: 'Bearer ' + token
  };
    
  const columns = [
    {
      title: '订票日期',
      dataIndex: 'appointDate',
      key: 'appointDate',
    },
    {
      title: '订票时段',
      dataIndex: 'appointTime',
      key: 'appointTime',
      render: (text: number, row: any) => {
        return row.platform === 1 ? appointTimeMap[text] : palaceAppointTimeMap[text]
      },
    },
    {
      title: '平台',
      dataIndex: 'platform',
      key: 'platform',
      render: (text: number) => platformMap[text],
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text: number) => text ? '进行中' : '已取消',
    },
    {
      title: '游客信息',
      dataIndex: 'touristInfo',
      key: 'touristInfo',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (_t: any, row: any) => (
        <Space>
          {row.status === 1 && <Button onClick={() => handlerChangeStatus(row.id, 0)} type='link'>取消任务</Button>}
          {row.status === 0 && <Button onClick={() => handlerChangeStatus(row.id, 1)} type='link'>重启任务</Button>}
        </Space>
      )
    },
  ];

  const handlerChangeStatus = (id: number, status: number) => {
    Modal.confirm({
      title: status ? '重启任务' : '取消任务',
      content: '是否确认',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        try {
          await updateTaskStatus({ id, status });
          handlerSearch();
        } catch (error) {
          console.log(error);
        }
      },
    });
  };

  const queryList = async (page: number) => {
    setLoading(true);
    const data = form.getFieldsValue();
    try {
      const res = await getTaskList({ ...data, page });
      if (res.data.code === 200) {
        setDataSource(res.data.data.rows);
        // setTotal(res.data.total);
      }
    } catch (error) {
      
    }
    setLoading(false);
  };

  const handlerSearch = () => {
    queryList(1);
  }

  useEffect(() => {
    handlerSearch();
  }, []);

  const handlerCloseModal = () => {
    setMuseumVisable(false);
    setPalaceVisable(false);
    handlerSearch();
  };

  const items = [
    {
      key: '1',
      label: <a  target='_blank' href="https://ossprod.jrdaimao.com/file/1712222242598699.xlsx">国家博物馆模版</a>,
    },
    {
      key: '2',
      label: <a target='_blank' href="https://ossprod.jrdaimao.com/file/1712222331335682.xlsx">故宫博物馆模版</a>,
    },
  ];

  return (
    <div className={styles.container}>
      <SearchForm form={form} onSearch={handlerSearch} />
      <Space>
        <Button onClick={() => setMuseumVisable(true)} type="primary">添加国家博物馆任务</Button>
        <Button onClick={() => setPalaceVisable(true)} type="primary">添加故宫博物馆任务</Button>
        <Upload headers={headers} showUploadList={false} accept='xlsx' maxCount={1} action={UploadHost + '/api/appointTask/importExcelMuseum'}>
          <Button icon={<UploadOutlined />}>导入国家博物馆</Button>
        </Upload>
        <Upload headers={headers} showUploadList={false} accept='xlsx' maxCount={1} action={UploadHost + '/api/appointTask/importExcelPlace'}>
          <Button icon={<UploadOutlined />}>导入故宫博物馆</Button>
        </Upload>
        <Dropdown menu={{ items }} placement="bottom" arrow>
          <Button>导入模版</Button>
        </Dropdown>
      </Space>
      <div className={styles.table}>
        <Table
          key="id"
          loading={loading}
          dataSource={dataSource}
          columns={columns}
        />
      </div>
      {museumVisable && <MuseumForm onClose={handlerCloseModal} />}
      {palaceVisable && <PalaceForm onClose={handlerCloseModal} />}
    </div>
  );
};

export default Index;
